<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>课程详情</title>
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <link href="../../css/public_win.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css" media="screen">
        .right_btns {
            width: 268px;
        }
        .right_btns img {
            margin: 0 auto;
            width: 25px;
            height: 25px;
        }
        .right_btns p {
            font-size:13px;
            font-weight:400;
            color:rgba(255,255,255,1);
            text-align: center;
            line-height: 15px;
        }
        #footer {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            height: 50px;
            box-sizing: content-box;
        }
        #footer img {
            margin: 0 5px;
            width: 40px;
            height: 40px;
        }
        #footer p {
            font-size:16px;
            font-weight:500;
            color:rgba(255,255,255,1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header id="header" class="blue-bg">
            <div class="public_header" data-flex="main:justify">
                <div class="back_img" tapmode @click="fnBack()">
                    <img src="../../image/nav_back.png">
                </div>
                <div class="right_btns" data-flex="box:mean cross:center">
                    <div class="btn" @click="handleHeaderBtn(index)" v-for="item,index in headerBtns">
                        <img :src="'../../image/course/headerBtn'+index+'.png'" alt="">
                        <p>{{item.catalogName}}</p>
                    </div>
                </div>
            </div>
        </header>
        <footer id="footer" class="blue-bg" data-flex="box:justify cross:center">
            <img onclick="handlePlayAll()" :src="!playAll ? '../../image/course/detail_play.png' : '../../image/course/detail_pause.png'" alt="">
            <p>{{courseIndex > -1 ? courseData[courseIndex].catalogName : ''}}</p>
            <div data-flex>
                <img onclick="handleShowVoice()" :src="isShowVoice ? '../../image/course/show_all_voice.png' : '../../image/course/all_voice.png'" alt="">
                <img onclick="handleFull()" src="../../image/course/screen_full.png" alt="">
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-tabbar.js"></script>
<script type="text/javascript">
    var vm;
    var parameter = {};
    var USER, $S;
    var nextPages = [
        'course1/word_card',
        'course1/video_list',
        'course1/read_list',
        'course1/karaoke_list',
        'question/question_menus'
    ];
    apiready = function () {
        USER = USER();
        $S = SERVICE();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        parameter = api.pageParam;
        fnInit();
        api.addEventListener({
            name: 'exit_screen'
        }, function() {
            var _headerH = AD('header').offsetH();
            var _footerH = AD('footer').offsetH();
            api.setFrameAttr({
                name: 'course_detail_frm',
                rect: {
                    x: 0,
                    y: _headerH,
                    w: "auto",
                    h: api.winHeight - _headerH - _footerH
                }
            });
        })
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                headerBtns: ['单词卡', '视频', '跟读', '卡拉OK', '练习'],
                courseData: [],
                courseIndex: -1,
                isFull: false,
                isShowVoice: false,
                playAll: false
            }
        });
        getPageData();
    }

    function getPageData() {
        var url = 'catalog/findSubsectCatalogList';
        var params = {
            id: parameter.id,
            queryStudentId: USER.Get('custId')
        };
        var callback = function(data) {
            vm.courseData = data.listData[0].childCatalogList;
            vm.headerBtns = data.listData.slice(1, data.listData.length);
            if(vm.courseData.length > 0) {
                vm.courseIndex = 0;
                openDetail();
            }
        };
        POST(url, params, callback)
    }

    function openDetail() {
        fixStatusBar();
        fixFooterBtn();
        //渲染之后打开页面，为了准确获取header的高
        var _headerH = AD('header').offsetH();
        var _footerH = AD('footer').offsetH();
        parameter.listData = vm.courseData;
        var param = {
            name: 'course_detail_frm',
            url: './course_detail.html',
            useWKWebView: true,
            bgColor: 'rgba(0,0,0,0)',
            rect: {
                x: 0,
                y: _headerH,
                w: "auto",
                h: api.winHeight - _headerH - _footerH
            },
            softInputMode: 'resize',
            pageParam: parameter
        }
        fnOpenFrame(param);
    }

    // 播放全部
    function handlePlayAll() {
        api.execScript({
            name: api.winName,
            frameName: 'course_detail_frm',
            script: 'playAll();'
        });
    }
    // 设置播放全部状态
    function setIsPlayAll(playAll) {
        vm.playAll = playAll;
    }

    // 设置课文下标
    function setCourseIndex(index) {
        vm.courseIndex = index;
        vm.playAll = false;
    }

    // 显示可点击区域
    function handleShowVoice() {
        vm.isShowVoice = !vm.isShowVoice;
        api.execScript({
            name: api.winName,
            frameName: 'course_detail_frm',
            script: 'handleShowVoice('+ vm.isShowVoice +');'
        });
        // if(!vm.isShowVoice) {
        //     // 未展示时展示可点击区域
        //     // 然后5S后消失
        //     vm.isShowVoice = true;
        //     api.execScript({
        //         name: api.winName,
        //         frameName: 'course_detail_frm',
        //         script: 'handleShowVoice(true);'
        //     });
        //     setTimeout(function() {
        //         vm.isShowVoice = false;
        //         api.execScript({
        //             name: api.winName,
        //             frameName: 'course_detail_frm',
        //             script: 'handleShowVoice(false);'
        //         });
        //     }, 5*1000)
        // }
    }

    // 全屏
    function handleFull() {
        api.setFrameAttr({
            name: 'course_detail_frm',
            rect: {
                w:0,y:0,w:'auto',h:'auto'
            }
        });
        var params = {
            name: 'btn_frm',
            url: './full_btn.html',
            bgColor: 'rgba(0,0,0,0)',
            rect: {
                x: api.winWidth -8 -40, y: api.winHeight -8 -40,
                w: 40, h: 40
            }
        }
        fnOpenFrame(params);
        api.execScript({
            name: 'course_win',
            frameName: 'course_detail_frm',
            script: 'vm.isFull = true;'
        });
    }

    // 点击头部按钮
    function handleHeaderBtn(index) {
        var param = {}, item = vm.headerBtns[index];
        if(index == 4) {
            param = {
                isBtn: true,
                btnName: '个人报告',
                headerFn: 'handleReport'
            }
        }

        param.listData = item.childCatalogList;
        param.id = item.id;
        param.code = item.questionTypeCode;
        param.pageMsg = item;
        api.execScript({
            name: api.winName,
            frameName: 'course_detail_frm',
            script: 'handlePagePause();'
        });
        fnOpenPublicWin(item.catalogName, nextPages[index], param);
    }

    //页面返回
    function fnBack() {
        fnDelayCloseWin(0);
    }
</script>

</html>
